<template>
  <!--  参数说明 -->
  <!-- [columnNum]-- 自定义列数 -->
  <!-- [rectanList]--宫格数据 list=>map结构-->
  <!-- --map[imgurl]图片路径 map[url]跳转路由 map[text]下标文字-->
  <van-grid :column-num="columnNum" :style="styles.grid" clickable>
    <van-grid-item ref="item" v-for="(item, index) in list" :key="index" :style="styles.grid" @click="onGridClick(item)" data-seed="griditem" :data-biztype="item.text">
      <template #icon>
        <svg-icon v-if="item.svg" :iconName="item.svg" :style="styles.icon" />
        <img v-else :style="styles.icon" :src="item.imgurl || item.img" />
      </template>
      <template #text>
        <span :style="styles.text" class="grid-item-name" :class="`font-size-${fontSize}`">{{ item.text }}</span>
      </template>
    </van-grid-item>
  </van-grid>
</template>
<script>

export default {
  name: 'anGrid',
  data() {
    return {};
  },
  components: {},
  props: {
    // 宫格组件数据
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    columnNum: {
      type: Number,
      default: 4
    },
    /**
     * icon大小
     */
    iconSize: {
      type: Number,
      default: 24
    },
    /**
     * 背景色
     */
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    /**
     * 文本颜色
     */
    color: {
      type: String,
      default: '#333333'
    },
    /**
     * 文本字体大小
     */
    fontSize: {
      type: Number,
      default: 24
    },
    /**
     * 文本样式
     */
    fontStyle: {
      type: Object
    },
    /**
     * 圆角大小
     */
    radius: {
      type: Number,
      default: 5
    },
    // 是否可点击
    clickable: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    styles() {
      return {
        grid: {
          backgroundColor: this.backgroundColor,
          borderRadius: `${this.radius}px`
        },
        gridItem: {
          backgroundColor: this.backgroundColor
        },
        icon: {
          width: `${this.iconSize}px`,
          height: `${this.iconSize}px`
        },
        text: {
          textAlign: 'center',
          color: this.color,
          ...this.fontStyle
        }
      };
    }
  },
  methods: {
    onGridClick(item) {
        this.$emit('onclickable',item);
    }
  },
  mounted() {
    // 根据columnNum 设置margin-top
    this.$refs.item?.map((one, index) => {
      if (index < this.columnNum) {
        one.$el.classList.add('margin-top');
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.van-grid {
  padding-bottom: 40px;
}

::v-deep .van-grid-item {
  margin-top: 56px;
  padding: 0;
  // 前5个marginTop为20，其余默认28
  // &:nth-child(-n + 5) {
  //   margin-top: 40px;
  // }

  .van-grid-item__content {
    padding: 0 8px;
    justify-content: flex-start;
    .grid-item-name {
      margin-top: 16px;
      // height: 40px;
    }
  }
}
.van-grid-item.margin-top {
  margin-top: 40px;
}
</style>
